<template>
  <div :class="['cheader',isRoll?'roll':'']">
    <div class="content">
      <img src='@/common/img/logo.png' alt="" @click="goIndex">
      <!-- <img src='@/common/img/logo2.png' alt="" @click="goIndex" v-if="isRoll"> -->
      <ul>
        <li :class="[pageIndex==3?'active':'']">
          <router-link to="/project4">
            <h4>一线战疫专题</h4>
            <span></span>
          </router-link>
        </li>
        <li :class="[pageIndex==2?'active':'']">
          <router-link to="/project3">
            <h4>科研战疫专题</h4>
            <span></span>
          </router-link>
        </li>
        <li :class="[pageIndex==1?'active':'']">
          <router-link to="/project2">
            <h4>全球交大人战疫专题</h4>
            <span></span>
          </router-link>
        </li>
        <li :class="[pageIndex==0?'active':'']">
          <router-link to="/project1">
            <h4>文化战疫专题</h4>
            <span></span>
          </router-link>
        </li>
        <!-- <li :class="[pageIndex==4?'active':'']" v-if="isLogin">
          <router-link to="/formList">
            <h4>个人空间</h4>
            <span></span>
          </router-link>
        </li> -->
      </ul>
      <!-- <div class="login" v-if="!isLogin">
        <div class="wrap" @click="goLogin">
          <font-awesome-icon :icon="['far', 'user']" />
          登录
        </div>
      </div> -->
      <div class="loginInfo" v-if="isLogin">
        <div class="jname">JACCOUNT: {{userInfo.account}}</div>
        <div class="logout">
          <div class="wrap" @click="goLogout">
            <font-awesome-icon icon="sign-out-alt" class="icon"/>
            登出
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import util from '@/common/js/util'
import api from '@/common/js/api'
const url = require('url')
export default {
  data () {
    return {
      isRoll: false,
      static: {
        // logo
        logoPng: '/static/img/common/logo.png'
      },
      isLogin: false,
      userInfo: {}
    }
  },
  mounted () {
    this.checkLogin()
    this.rollfun()
    window.addEventListener('scroll', this.rollfun)
  },
  props: {
    pageIndex: ''
  },
  methods: {
    checkLogin () {
      let code = url.parse(window.location.href, true).query.code
      let userInfo = localStorage.getItem('userInfo')
      if (code) {
        api.login(code).then(res => {
          if (res.data.result === '0') {
            // console.log(res)
            localStorage.setItem('userInfo', JSON.stringify(res.data.data))
            this.userInfo = res.data.data
            this.isLogin = true
          }
        })
        return false
      }
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo)
        this.isLogin = true
      }
    },
    // 去登录
    goLogin () {
      util.goLogin()
    },
    goLogout () {
      this.isLogin = false
      localStorage.removeItem('userInfo')
      util.goLogout()
      this.$router.push({
        name: 'project1'
      }).catch((e) => console.log(''))
      api.logout().then(res => {
        console.log('')
      })
    },
    rollfun () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 100) {
        this.isRoll = true
      } else {
        this.isRoll = false
      }
    },
    goIndex () {
      this.$router.push({
        name: 'index'
      }).catch((e) => console.log(''))
    }
  }
}
</script>
<style lang="scss" scoped>
  .cheader {
    // background: #ccc;
    height: 118px;
    line-height: 118px;
    position: fixed;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #ddd;
    transition: all .1s;
    &.roll {
      background-color: rgba($color: #005083, $alpha: .8);
      border: 0 none;
      .content {
        ul {
          li {
            h4 {
              color: #fff;
            }
            span {
              background-color: #fff;
            }
          }
        }
      }
    }
    .content {
      width: 1300px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      img {
        display: inline-block;
        vertical-align: top;
        width: 202px;
        height: 59px;
        margin-top: 32px;
        cursor: pointer;
        // margin-left: 47px;
      }
      ul {
        li {
          display: inline-block;
          margin-right: 40px;
          line-height: 28px;
          font-size: 16px;
          &.active {
            h4 {
              font-weight: bolder;
            }
            span {
              opacity: 1;
            }
          }
          span {
            display: block;
            margin: 6px auto 0;
            width: 30px;
            height: 4px;
            background-color: #ffe75f;
            opacity: 0;
          }
          a {
            color: #fefefe;
          }
        }
      }
      .login {
        .wrap {
          // background-color: red;
          cursor: pointer;
          height: 40px;
          line-height: 40px;
          margin-top: 39px;
          color: #fff;
        }
      }
      .loginInfo {
        color: #fff;
        .jname {
          display: inline-block;
          margin-right: 20px;
        }
        .logout {
          display: inline-block;
          .wrap {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
